<template>
	<div class="addProject UserAdd">
		<div class="addForm zll-form">
			<el-form ref="addForm" class="demo-ruleForm">
				<el-form-item class="formList" label="序号：">
					<el-input clearable class="input_right" placeholder="请输入层级"
							  v-model="roleData.seq" type="number" min="1"></el-input>
				</el-form-item>
				<el-form-item class="formList" prop="addFormData1" label="角色名称：">
					<el-input clearable class="input_right" placeholder="请输入角色名称"
							  v-model="roleData.roleName"></el-input>
				</el-form-item>

			</el-form>
		</div>
		<div class="Table_body zll-table powerTable">
			<el-table :data="copyPermission"
					  :show-header="false"
					  border
					  fit
					  size="mini"
					  highlight-current-row
					  style="width: 100%;"
					  :span-method="arraySpanMethod">

				<el-table-column label="序号"
								 prop="index"
								 align="center"
								 width="40">
				</el-table-column>
				<el-table-column label="主标题"
								 prop="title"
								 width="160"
								 align="center">
				</el-table-column>
				<el-table-column label="副序号"
								 prop="subIndex"
								 width="40"
								 align="center">
				</el-table-column>
				<el-table-column label="副标题"
								 width="160"
								 prop="subTitle"
								 align="center">
					<template slot-scope="{row}">
						<el-checkbox v-model="row.secondCheck" @change="changeSecondCheck(row)">{{ row.subTitle }}
						</el-checkbox>

					</template>
				</el-table-column>
				<el-table-column label="操作"
								 class-name="small-padding fixed-width">
					<template slot-scope="{row}">
						<el-checkbox-group v-model="row.checkedRole"
										   @change="handleCheckedRoleChange(row)">
							<el-checkbox :label="item.value" v-for="(item,index) in row.thirdModule" :key="index"
										 :disabled="!row.secondCheck">{{item.title}}
							</el-checkbox>
						</el-checkbox-group>

					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script>
	export default {
		props: ["editData", "type", "roles", "selfValue"],
		data() {
			return {
				roleData: {roleName: "", rolePermission: "",seq:""},
				permissionList: [],
				copyPermission: [],
				centerDialogVisible: false,
				clickModalHide: false,
				count: 0,
				titleTxt: ''
			}
		},
		methods: {
			getAllPermission() {
				let self = this;
				self.$http({
					url: "/jinl/permission/queryActionPermission",
					method: "post",
				}).then(resp => {
					if (resp.success) {
						console.log(resp.result)
						let permissionList = [];
						let i = 1;
						for (let per of resp.result) {
							let span = false;
							let subK = 1;
							if(!per||!per.children){
								continue;
							}
							for (let _c of per.children) {
								let obj = {
									value: _c.permission,
									index: i,
									span: per.children.length,
									title: per.moduleName,
									subIndex: "",
									subTitle: per.moduleName,
									checkedRole: [],
									secondCheck: false,
									thirdModule: []
								};
								obj.subTitle = _c.moduleName;
								obj.subIndex = i + "." + subK;
								if (_c.children) {
									for (let _cc of _c.children) {
										let child = {title: _cc.moduleName, value: _cc.permission};
										obj.thirdModule.push(child);
									}
								}
								if (span) {
									obj.span = 0;
								}
								permissionList.push(obj);
								subK++;
								span = true;
							}
							i++;
						}
						self.permissionList = permissionList;
					}
				});
			},
			changeSecondCheck(row) {
				row.checkedRole = [];
				if (row.secondCheck) {
					for (let c of row.thirdModule) {
						row.checkedRole.push(c.value);
					}
				}
			},
			handleCheckedRoleChange(value) {
				console.log(value)
			},
			savePermission() {
				let self = this;
				let permissionList = [];
				let indexs = [];
				if(!this.roleData.roleName.trim()){
					self.$notify({
						title: '提示',
						message: "角色不能为空！",
						type: 'warning'
					});
					return;
				}
				for (let data of this.copyPermission) {
					if (data.secondCheck) {
						let index = data.value.split(':')[1] + ':index';
						if (indexs.indexOf(index) < 0) {
							permissionList.push(index);
							indexs.push(index)
						}
						permissionList.push(data.value);
					}
					permissionList.push(...data.checkedRole);
				}
				this.roleData.rolePermission = permissionList.join(",");

				let url = this.type == 'add' ? "/jinl/role/addRoleDetail" : "/jinl/role/updateRoleDetail";
				if (this.roles) {
					for (let r of this.roles) {
						if (this.type == 'add' && r.roleName.trim() == this.roleData.roleName.trim()) {
							self.$notify({
								title: '提示',
								message: "角色重复！",
								type: 'error'
							});
							return;
						}
						if (this.type == 'edit' && this.selfValue.trim() != this.roleData.roleName.trim() && r.roleName.trim() == this.roleData.roleName.trim()) {
							self.$notify({
								title: '提示',
								message: "角色重复！",
								type: 'error'
							});
							return;
						}
					}
				}
				if (this.count == 0) {
					self.$http({
						url: url,
						method: "post",
						params: this.roleData,
					}).then(resp => {
						if (resp.success) {
							self.$eventBus.$emit("updateRoleList");
							self.$notify({
								title: '提示',
								message: "操作成功！",
								type: 'success'
							});
							self.$eventBus.$emit("updateRoleList");
							return
						}
						self.$notify({
							title: '提示',
							message: "出现异常，请联系管理员",
							type: 'error'
						});
						this.count--;
					});
					this.count++;
				}
			},
			arraySpanMethod({row, columnIndex}) {
				if (columnIndex < 2) {
					if (row.span === 0) {
						return [0, 0]
					} else {
						return [row.span, 1]
					}
				}
			},

			showCheckPermission(rolePermission) {
				if (rolePermission) {
					let array = rolePermission.split(",");
					for (let p of this.copyPermission) {
						if (array.indexOf(p.value) > -1) {
							p.secondCheck = true;
						}
						for (let t of p.thirdModule) {
							if (array.indexOf(t.value) > -1) {
								p.checkedRole.push(t.value);
							}
						}
					}
				}
			}
		},
		watch: {
			editData(val) {
				this.copyPermission = JSON.parse(JSON.stringify(this.permissionList));
				this.roleData = {roleName: "", rolePermission: "", id: ""};
				if (this.type == "edit") {
					this.roleData.roleName = val.roleName;
					this.roleData.id = val.id;
					this.showCheckPermission(val.rolePermission);
				}
				this.count = 0;
				if (this.type == "add") {
					this.titleTxt = "新增"
				} else if (this.type == "edit") {
					this.titleTxt = "编辑"
				}
			}
		},
		mounted() {
			this.getAllPermission();
		}
	}
</script>
<style lang="scss" scoped>
	@import "@/style/dialog.scss";

	.UserAdd {
		.addForm {
			width: 50%;
		}

		.zll-table {
			margin-top: 15px;
		}
	}

</style>
